$(function(){
    let allimglength = 0;
    //获取导航栏菜单
    $.ajax({
        url:"http://127.0.0.1:3000/apiData/cateList.json",
        type:"get",
        dataType:'json',
        success:(res)=>{
            // console.log(res);
            $('.navBottom-list').append(renderNavItem(res))
        }
    })
    $.ajax({
        url:"http://127.0.0.1:3000/apiData/newsFirst.json",
        dataType:'json',
        type:"get",
        success:(res)=>{
            // console.log(res);
            $('.prolist ul').append(renderNewFirst(res.newFirst))
            // console.log(res.hotList.left);
            $('.remlist-left').append(topSale(res.hotList.left));
            // console.log(res.hotList.right);
            $(".remlist-right").append(saleList(res.hotList.right))
            // console.log(res.bannerList);
            $(".banner-list .images").append(bannerData(res.bannerList));
            $(".images").css('margin-left','-369px')
            allimglength = res.bannerList.length;
            setInterval(() => {
                $(".btn2").click()
            }, 3000);


            // console.log(res.producDetails)
            $('.productList').append(renderProductList(res.producDetails));
        }
    })
    let index = 1 ;
    $(".btn1").click(function(){
        aimgMove(0,'+',()=>{
           $('.images').children().last().prependTo($('.images')) 
           $(".images").css('margin-left','-369px')
        });
    })
    $(".btn2").click(function(){
        // console.log(allimglength);
        aimgMove(2,'-',()=>{
            $('.images').children().first().appendTo($('.images')) 
            $(".images").css('margin-left','-369px')
        });
    })
})

function renderProductList(product){
    let productHtml=""
    product.forEach(product=>{
        // console.log(product)
        productHtml+=`
                <li>
                    <a href="detailsPage.html?goodId=${product.goodId}">
                        <div class="productimg">
                            <img src="${product.goodImg}"
                                alt="">
                        </div>
                        <div class="sale">
                            <div class="price">
                                <p>品类狂欢</p>
                                <p>￥${product.goodsPrice}</p>
                            </div>
                            <div class="saleTime">
                                <p>仅剩8小时</p>
                            </div>
                        </div>
                        <div class="plkhDetail">
                            <span class="parceActive">品类狂欢</span>
                            <p>${product.goodsName}</p>
                            <span class="disconut">￥${product.goodsPrice}</span>
                            <span class="real">￥${product.realPrice}</span>
                        </div>
                        <p class="talk">${product.goodsComment}</p>
                    </a>
            </li>`
    });
    return productHtml;
}


function aimgMove(index,arrow,cb){
    // console.log(arrow+(index*369) +'px')
    $(".images").stop().animate({
        marginLeft:arrow+ (index*369)+'px'
    },function(){
        cb()
    })
}


function bannerData(bannerList){
    let bannerListHtml = ""
    bannerList.forEach(bannerListData =>{
        // console.log(bannerListData)
        bannerListHtml += `
            <div class="banner-images">
                <div class="lbimg">
                    <a href="listPage.html"><img src="${bannerListData.goodImg}" alt=""></a>
                </div>
                <div class="lbitems">
                    <p>${bannerListData.goodsCommentDetails}</p>
                    <p>${bannerListData.goodsName}</p>
                    <p>${bannerListData.goodsComment}</p>
                </div>
        </div>`
    })
    return bannerListHtml;
}



function saleList(topRightDate){
    let topRightHtml =""
    topRightDate.forEach(topRightItem=>{
        topRightHtml +=`
                <li class="libottom">
                    <div class="list-img">
                        <a  href="listPage.html"><img src="${topRightItem.goodImg}" alt=""></a>
                    </div>
                    <div class="list-items">
                        <p class="list-parice">${topRightItem.goodscheap}</p>
                        <p>${topRightItem.goodsName}</p>
                        <p>¥${topRightItem.goodsPrice}</p>
                    </div>
            </li>`
    })
    return topRightHtml;
}

function topSale(topLeftData){
    let topLeftHtml = ""
    // console.log(topLeftData)
        topLeftHtml += `
                    <div class="leftimg">
                        <a  href="listPage.html"><img src=" ${topLeftData.goodImg}" alt=""></a>
                    </div>
                    <p>${topLeftData.goodsName}</p>
                    <span>¥${topLeftData.goodsPrice}</span>
                `
    return topLeftHtml;
}



function renderNewFirst(newsDate){
    let newHtml = ""
    newsDate.forEach(newsDateItem=>{
        newHtml+=`
            <li>
                <div class="content">
                    <a href="listPage.html">
                        <div class="imgbox">
                        <img src="${newsDateItem.goodImg}"
                            alt="">
                        <div class="sale">
                            <div class="price">
                                <p class="price-title">年度狂欢价</p>
                                <p class="price-content">￥${newsDateItem.goodsPrice}
                                </p>
                            </div>
                            <div class="saleactive">仅剩${newsDateItem.goodActiveDays}天</div>
                        </div>
                </div>
                    </a>
                    <div class="detail">
                        <p>年货狂欢价</p>
                        <p>${newsDateItem.goodsName}</p>
                        <p>￥${newsDateItem.goodsPrice}
                            <span>￥${newsDateItem.realPrice}</span>
                        </p>
                    </div>
                </div>
            </li>`
    })
    return newHtml;
}


function renderNavItem(itemData){
    let navHtml = ''
    itemData.forEach(navData => {
        navHtml += `
        <li>
            <a href="listPage.html">${navData.name}</a>
            <div class="navchilds">
                ${renderSubNav(navData.subCateGroupList)}
            </div>
        </li>
    `
    });
    return navHtml
}

function renderSubNav(subItemData){
    let subNav = ''
    subItemData.forEach(subNavData=>{
        subNav+=`
        <div class="childtypes">
            <h2>${subNavData.name}</h2>
            ${renderSubNavChild(subNavData.categoryList)}
        </div>
        `
    })
    return subNav
}

function renderSubNavChild(childData){
    let childHtml = ''
    childData.forEach(data=>{
        childHtml+=`
        <ul class="childitems">
            <li>
                <a href="listPage.html">
                    <img src="${data.bannerUrl}" alt="">
                    <span>${data.name}</span>
                </a>
            </li>
        </ul>
        `
    })
    return childHtml
}